
import { deleteFileInf } from "@/utils/deleteFileInf";
import { PlusOutlined } from "@ant-design/icons";
import { Button, Form, Input, Spin, Upload } from "antd";


import { FieldType, useConfigAdmin } from "../hooks/useConfigAdmin";


export default function ConfigAdmin() {
  const {loading,btnLoading,form,onFinish,fileList,uploadFileInf,setFileList}= useConfigAdmin()
  const uploadButton = (
    <button style={{ border: 0, background: "none" }} type="button">
      <PlusOutlined />
      <div style={{ marginTop: 8 }}>上传</div>
    </button>
  );
  return (
    <Spin spinning={loading}>
      <Form
        form={form}
        name="configHomeText"
        size="middle"
        onFinish={onFinish}
        autoComplete="off"
        layout="vertical"
      >
        <Form.Item<FieldType>
          name="name"
          label="姓名"
          rules={[
            { required: true, message: "请输入!" },
            { max: 10, message: "姓名最长10个字" },
          ]}
        >
          <Input />
        </Form.Item>

        <Form.Item<FieldType>
          name="avatar"
          label="头像"
          rules={[{ required: true, message: "请选择头像" }]}
        >
          <Upload
            name="avatar"
            listType="picture-circle"
            className="avatar-uploader"
            action="#"
            fileList={fileList}
            customRequest={(file) => uploadFileInf(file.file)}
            onRemove={async () => {
              const url = fileList[0] && fileList[0].url ? fileList[0].url : "";
              if (url) {
                deleteFileInf(url);
              }
              setFileList([]);
            }}
          >
            {fileList.length >= 1 ? null : uploadButton}
          </Upload>
        </Form.Item>
        <Form.Item<FieldType>
          name="email"
          label="邮箱"
          rules={[{ required: true, message: "请输入邮箱" }]}
        >
          <Input />
        </Form.Item>
        <Form.Item<FieldType>
          name="gitee"
          label="gitee"
          rules={[{ required: true, message: "请输入" }]}
        >
          <Input />
        </Form.Item>
        <Form.Item<FieldType>
          name="github"
          label="github"
          rules={[{ required: true, message: "请输入!" }]}
        >
          <Input />
        </Form.Item>
        <Form.Item>
          <Button type="primary" htmlType="submit" loading={btnLoading}>
            保存
          </Button>
        </Form.Item>
      </Form>
    </Spin>
  );
}
